<template>
  <div class="fundlist">
    <div>
      <el-form :inline="true" ref="addData">
        <!-- 实现筛选 -->
        <el-form-item label="按照时间筛选">
          <el-date-picker
            v-model="searchData.startTime"
            type="datetime"
            placeholder="选择开始时间"
          >
          </el-date-picker>
          --
          <el-date-picker
            v-model="searchData.endTime"
            type="datetime"
            placeholder="选择结束时间"
          >
          </el-date-picker>
          <el-form-item class="btnSearch">
            <el-button
              type="primary"
              size="small"
              icon="search"
              @click="handleSearch"
              >筛选</el-button
            >
          </el-form-item>
        </el-form-item>
        <el-form-item class="btnRight">
          <el-button
            type="primary"
            size="small"
            icon="view"
            v-if="user.identity == 'manager'"
            @click="handleAdd"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        v-if="tableData.length"
        max-height="450"
        border
      >
        <el-table-column label="序号" width="50" type="index" align="center">
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="230"
          prop="date"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收支类型"
          width="110"
          prop="type"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="描述"
          width="210"
          prop="describe"
          align="center"
        >
        </el-table-column>
        <el-table-column label="收入" width="110" prop="income" align="center">
          <template slot-scope="scope">
            <span style="color: #00d053">{{ scope.row.income }}</span>
          </template>
        </el-table-column>
        <el-table-column label="支出" width="110" prop="expend" align="center">
          <template slot-scope="scope">
            <span style="color: #f56767">{{ scope.row.expend }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="账户余额"
          width="130"
          prop="cash"
          align="center"
        >
          <template slot-scope="scope">
            <span style="color: #4db3ff">{{ scope.row.cash }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="210" prop="remark" align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop="operation"
        >
          <template slot-scope="scope" v-if="user.identity == 'manager'">
            <el-button
              type="warning"
              size="small"
              icon="edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              icon="delete"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="paginations.pageIndex"
              :page-sizes="paginations.pageSizes"
              :page-size="paginations.pageSize"
              :layout="paginations.layout"
              :total="paginations.total"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <Dialog :dialog="dialog" :formData="formData" @update="getProfile"></Dialog>
  </div>
</template>

<script>
import Dialog from "../components/Dialog";
export default {
  components: { Dialog },
  name: "FundList",
  data() {
    return {
      searchData: {
        startTime: "",
        endTime: "",
      },
      filterTableData: [],
      paginations: {
        pageIndex: 1, //默认显示第一页
        total: 0, //总数
        pageSize: 5, //每页显示多少条
        pageSizes: [5, 10, 15, 20], //每页显示多少条选项
        layout: "total, sizes, prev, pager, next, jumper",
      },
      tableData: [],
      allTableData: [],
      formData: {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: "",
      },
      dialog: {
        show: false,
        title: "",
        option: "edit",
      },
    };
  },
  created() {
    this.getProfile();
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    getProfile() {
      //获取表格数据
      this.$axios
        .get("/api/profiles")
        .then((res) => {
          this.allTableData = res.data;
          this.filterTableData = res.data;
          this.setPagination();
        })
        .catch((err) => console.log(err));
    },
    setPagination() {
      //设置分页属性
      this.paginations.pageIndex = 1;
      this.paginations.pageSize = 5;
      this.paginations.total = this.allTableData.length;
      //设置默认分页
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.pageSize;
      });
    },
    handleEdit(index, row) {
      //编辑功能
      this.dialog = {
        title: "修改资金信息",
        option: "edit",
        show: true,
      };
      this.formData = {
        type: row.type,
        describe: row.describe,
        income: row.income,
        expend: row.expend,
        cash: row.cash,
        remark: row.remark,
        id: row._id,
      };
    },
    handleDelete(index, row) {
      //删除功能
      this.$axios.delete(`/api/profiles/delete/${row._id}`).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getProfile();
      });
    },
    handleAdd() {
      //添加功能
      this.dialog = {
        title: "添加资金信息",
        option: "add",
        show: true,
      };
      this.formData = {
        type: "",
        describe: "",
        income: "",
        expend: "",
        cash: "",
        remark: "",
        id: "",
      };
    },
    handleSizeChange(pageSize) {
      //实现更改分页显示多少条
      this.paginations.pageIndex = 1;
      this.paginations.pageSize = pageSize;
      this.paginations.total = this.allTableData.length;
      //实现更改分页显示多少条
      this.tableData = this.allTableData.filter((item, index) => {
        return index < pageSize;
      });
    },
    handleCurrentChange(page) {
      console.log(page);
      //获取当前页面
      let index = this.paginations.pageSize * (page - 1);
      //数据的总数
      let nums = this.paginations.pageSize * page;
      //容器
      let tables = [];
      for (let i = index; i < nums; i++) {
        if (this.allTableData[i]) {
          tables.push(this.allTableData[i]);
          this.tableData = tables;
        }
      }
    },
    handleSearch() {
      //如果时间为空
      if (!this.searchData.startTime || !this.searchData.endTime) {
        this.$message({
          type: "warning",
          message: "请选择时间!",
        });
        this.getProfile();
        return;
      }
      //时间不为空时进行筛选
      const sTime = this.searchData.startTime.getTime();
      const eTime = this.searchData.endTime.getTime();
      console.log(sTime);
      console.log(eTime);
      //进行筛选
      this.allTableData = this.filterTableData.filter((item) => {
        let date = new Date(item.date);
        let time = date.getTime();
        return time >= sTime && time <= eTime;
      });
      //分页方法调用
      this.setPagination();
    },
  },
};
</script>

<style scoped>
@import url("../../node_modules/element-ui/lib/theme-chalk/index.css");
.fundlist {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
  margin-bottom: 15px;
}
.btnSearch {
  margin-left: 15px;
}
.pagination {
  text-align: right;
  margin-top: 15px;
}
</style>